<template>
  <div class="particular-vip">
    <div style="display: flex; height: 106px">
      <div class="particular-vip-title">
        <div class="title-name">
          <div style="font-size: 24px">{{ data.name }}</div>
        </div>
        <div
          v-loading="datar.loading"
          style="margin-top: 14px; font-size: 13px"
        >
          <div style="margin-top: 4px">
            会员名称:<label style="margin-left: 8px">{{
              pak.pakList.name
            }}</label>
          </div>
          <div style="margin-top: 4px">剩余天数: {{ pak.currentDay }}天</div>
          <div style="margin-top: 4px">会员到期时间: {{ data.VIPOutTime }}</div>
        </div>
      </div>
      <div class="particular-vip-content">
        <div style="float: right">
          <el-button @click="delepuVip" type="danger">移除会员</el-button>
        </div>
      </div>
    </div>
    <div class="particular-list">
      <div class="list-kz">
        <div
          style="height: 100%; width: 70%; padding-top: 40px; margin-left: 27px"
        >
          <label>会员:</label>
          <label v-if="!datar.hy" style="margin-left: 10px">{{
            pak.pakList.name
          }}</label>
          <el-select
            v-if="datar.hy"
            v-model="pak.pakList.id"
            filterable
            placeholder="请选择会员"
            style="width: 200px; margin-left: 10px"
          >
            <el-option
              v-for="item in online.Viplist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div style="float: right; margin-top: 40px; width: 30%; height: 100%">
          <el-button v-if="!datar.hy" @click="datar.hy = true" type="primary"
            >修改会员</el-button
          >
          <el-button v-if="datar.hy" @click="datar.hy = false" type="info"
            >取消</el-button
          >
          <el-button v-if="datar.hy" @click="puVip" type="success"
            >保存</el-button
          >
        </div>
      </div>
      <div style="width: 100%; border: 1px solid #fff"></div>
      <div class="list-ky">
        <div
          style="height: 100%; width: 70%; padding-top: 36px; margin-left: 10px"
        >
          <label>到期时间:</label>
          <label v-if="!datar.sj" style="margin-left: 10px">{{
            data.VIPOutTime
          }}</label>
          <el-date-picker
            style="margin-left: 10px"
            v-if="datar.sj"
            v-model="props.data.VIPOutTime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="Pick a day"
          />
        </div>
        <div style="float: right; margin-top: 32px; width: 30%; height: 100%">
          <el-button v-if="!datar.sj" @click="datar.sj = true" type="warning"
            >修改到期时间</el-button
          >
          <el-button v-if="datar.sj" @click="datar.sj = false" type="info"
            >取消</el-button
          >
          <el-button v-if="datar.sj" @click="pusjVip" type="success"
            >保存</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { reactive, onMounted, ref } from "vue";
import { getVip, Get_dg_Vip } from "@/api/Vip/Vips";
import { toast } from "@/tools/tools";
import {
  Update_vip,
  pu_date_vip,
  pu_sj_vip,
} from "@/api/OnlineCustomers/index";

const emit = defineEmits(["update:visible"]);

const online = reactive({
  onlinelist: [],
  VIPOutTime: new Date(),
  Viplist: [],
});

const datar = reactive({
  loading: true,
  tmie: "",
  hy: false,
  sj: false,
});

const pak = reactive({
  pakList: [],
  currentDay: 0,
  vip: [],
  selectedOptions: [],
});

//获取父级数据
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

// 修改会员
const puVip = async () => {
  const res = await Update_vip({
    id: props.data.id,
    VIPId: pak.pakList.id,
  });
  if (res.code >= 0) {
    toast.success(res.message);
    emit("update:visible", false); // 保存成功后关闭对话框
  } else {
    toast.error(res.message);
  }
};

// 移除会员
const delepuVip = async () => {
  const res = await pu_date_vip({
    id: props.data.id,
  });
  if (res.code >= 0) {
    toast.success(res.message);
    emit("update:visible", false); // 保存成功后关闭对话框
  } else {
    toast.error(res.message);
  }
};

// 修改到期时间
const pusjVip = async () => {
  const res = await pu_sj_vip({
    id: props.data.id,
    VIPOutTime: props.data.VIPOutTime,
  });
  if (res.code >= 0) {
    toast.success(res.message);
    emit("update:visible", false); // 保存成功后关闭对话框
  } else {
    toast.error(res.message);
  }
};

// 计算剩余天数
const time = () => {
  if (props.data.VIPOutTime == null) {
    return;
  }
  const currentDate = ref(new Date()); // 当前日期
  const year = props.data.VIPOutTime.split("-")[0]; // 获取年份
  const month = props.data.VIPOutTime.split("-")[1]; // 获取月份，从0开始，需要加1，并补零
  const day = props.data.VIPOutTime.split("-")[2];
  const outTime = `${year}-${month}-${day}`;
  const year1 = currentDate.value.getFullYear(); // 获取年份
  const month2 = String(currentDate.value.getMonth() + 1).padStart(2, "0"); // 获取月份，从0开始，需要加1，并补零
  const day3 = String(currentDate.value.getDate()).padStart(2, "0");
  const currentDateStr = `${year1}-${month2}-${day3}`;
  const sjc = new Date(outTime).getTime() - new Date(currentDateStr).getTime();
  pak.currentDay = Math.trunc(sjc / (24 * 60 * 60 * 1000));
};

const datas = reactive({
  y: 0,
  m: 0,
  b: 0,
  c: new Date(),
  sj: "",
});
// 计算会员到期时间
const oklp = (yy: number, mm: number) => {
  datas.y = datas.c.getFullYear() + yy;
  datas.m = datas.c.getMonth() + 1 + mm;
  datas.b = datas.c.getDate();
  datas.sj = `${datas.y}-${datas.m}-${datas.b}`;
  console.log(datas.sj);
  online.onlinelist.VIPOutTime = new Date(datas.sj);
};

// 绑定数据
const bind = async () => {
  const res = await Get_dg_Vip({
    id: props.data.VIPId,
  });
  if (res.code >= 0) {
    pak.pakList = res.data.data[0];
    time();
    datar.loading = false;
  }
  const resv = await getVip();
  if (resv.code === 0) {
    online.Viplist = resv.data.data;
  }
};

// 初始加载
onMounted(() => {
  bind();
});
</script>

<style scoped>
.particular-vip {
  width: calc(100% - 32px);
  height: calc(100% - 16px);
  padding: 10px 16px 14px 14px;
  background-color: #fff;
  border-radius: 10px;
}
.particular-vip-title {
  height: 100%;
  width: 50%;
}
.particular-vip-content {
  height: 100%;
  width: 50%;
}
.title-name {
  font-size: 24px;
  display: flex;
}
.title-name div {
  font-size: 14px;
}
.counselor-info {
  float: right;
}
.particular-list {
  height: calc(250px - 16px);
  width: calc(100% - 16px);
  margin-top: 16px;
  border-radius: 10px;
  border-radius: 10px;
  background-color: #ddd;
}
.list-kz {
  height: 50%;
  width: 100%;
  display: flex;
}
.list-ky {
  height: 50%;
  width: 100%;
  display: flex;
}
</style>
